<template>
    <div class="f-menu" :style="{width:$store.state.asideWidth}">
        <el-menu :unique-opened="false" :default-active="defaultActive" :collapse-transition="false" :collapse="isCollapse" class="el-menu-vertical-demo" @select="handSelect">
            <template v-for="(item, index) in asideMenu" :key="index">
                <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="(item2, index2) in item.child" :key="index2" :index="item2.frontpath">
                        <el-icon>
                            <component :is="item2.icon"></component>
                        </el-icon>
                        <span>{{ item2.name }}</span>
                    </el-menu-item>

                </el-sub-menu>
                <el-menu-item v-else :index="item.frontpath">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>

</div>
</template>
<script setup>
    import {ref,computed} from "vue"
    import { useRouter, useRoute,onBeforeRouteUpdate} from 'vue-router';
    import { useStore } from 'vuex';
    const route=useRoute()
    const store=useStore()
    // 刷新回到当前路由 页面
    const defaultActive=ref(route.path)

    // 监听路由变化
    onBeforeRouteUpdate((to,from)=>{
        console.log(to);
    })

    // 是否展开/缩放
    const isCollapse=computed(()=>!(store.state.asideWidth=="250px"))

    // 动态用户菜单列表
    const asideMenu =computed(()=>store.state.menus)


    const  router=useRouter()
    // 跳转对对应的菜单栏路由页面
    const handSelect = (e)=>{
       router.push(e)
    }
</script>
<style>
    .f-menu {
        transition: all 0.2s;
        top: 64px;
        width: 250px;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        overflow-x: hidden;
        @apply shadow-md fixed bg-light-50;
    }
    .f-menu::-webkit-scrollbar {
        display: none;
    }

</style>